<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器(simple selector)</title>

        <style type="text/css">
            /* 通配符选择器(universal selector) */
            * { font-size: 20px ; /* 定义元素内部的文字尺寸 */ }

            /* 标记选择器(type selector) */
            div { border : 1px solid #0000FF ; }
            p { border : 1px solid #666666 ; }

            /* CLASS选择器(class selector) : 在 className 之前添加 圆点 前缀 ( .className ) */
            .odd { background-color: yellow ; }
            .even { background-color: #efefef ; }

            /* ID选择器(ID selector) : 在指定的 elementId 之前指定 # 前缀 ( #elementId ) */
            #first { text-align: right ; /* 指定元素内部文本的水平排列方式 ( left | center | right ) */ }
            #second { text-align: center ; }
            #third { text-align: left ;  }
            #fourth { font-weight: bold ; /* 指定元素内部文本的 粗细 ( lighter | normal | bold | bolder ) */ }

        </style>

    </head>
    <body>

        <h3>ID选择器 (ID selector) </h3>
        
        <!-- HTML元素的id属性用来指定元素(element)的 标识(zhi)符(identifer) (程序员应该尽量保证元素的ID是惟一的) -->
        <div class="odd" id="first">
            田福申
        </div>

        <p class="even" id="second">
            王安石
        </p>

        <div class="odd" id="third">
            司马缸
        </div>

        <p class="even" id="fourth">
            砸光
        </p>

    </body>
</html>